<template>
  <div>
    <TitleCompound :title="title" :description="description"></TitleCompound>
  </div>
  <div class="parent">
    <div class="content">
      <CategorySlot>
        <template v-slot:title>
          <h1>热门游戏</h1>
        </template>
        <template #content>
          <!-- <h2>this is new content</h2> -->
          <ul>
            <li v-for="game in games" :key="game.toString()">{{ game }}</li>
          </ul>
        </template>
      </CategorySlot>
    </div>
    <div class="content">
      <CategorySlot>
        <template v-slot:title>
          <h1>热门电影</h1>
        </template>
        <template #content>
          <ul>
            <li v-for="movie in movies" :key="movie.toString()">{{ movie }}</li>
          </ul>
        </template>
      </CategorySlot>
    </div>
    <div class="content">
      <CategorySlot>
        <template v-slot:title>
          <h1>美食不可辜负</h1>
        </template>
        <template #content>
          <ul>
            <li v-for="food in foods" :key="food.toString()">{{ food }}</li>
          </ul>
        </template>
      </CategorySlot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import TitleCompound from '@/components/TitleCompound.vue';
import CategorySlot from './CategorySlot.vue';
import { ref } from 'vue';


const title = "Named Slot"
const description = `通过named slot来灵活展示内容`

const games = ref<String[]>(['王者荣耀', '吃鸡', '地下城勇士', '红警', '连连看'])
const movies = ref<String[]>(['哪吒2', '绝地求生', '飞跃地平线', '封神榜2'])
const foods = ref<String[]>(['烧烤', '火锅', '炒饭', '烤鱼'])

</script>
<style lang="scss" scoped>
li {
  list-style: none;
}

li::marker {
  content: '🔥';
}

h1 {
  // color: red;
  text-align: center;
  background-color: rgba(231, 243, 13, 0.779);
}

.parent {
  background-color: rgb(216, 214, 214);
  padding: 20px;
  display: flex;
  border-radius: 10px;
  justify-content: space-evenly;
}
</style>
